<template>
  <div class="special">
    <van-nav-bar title="严选专栏" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <ul class="content">
      <li v-for="(item,index) in newsList" :key="index" :style="{backgroundImage:`url(${item.pic})`}" @click="$router.push(`/specialDetail?id=${item.id}`)">
         <h6>{{item.title}}</h6>
         <p>{{item.descript}}</p>
         <button>查看详情</button>
      </li>
    </ul>
  </div>
</template>
<script>
import { getNews } from '../../api/home/index.js';
import { ref } from 'vue';
export default {
  setup(props) {
    const newsList = ref([]);
    getNews().then(res => {
      newsList.value = res.data;
    })
    return {
      newsList
    }
  }
}
</script>

<style lang="scss" scoped>
.special {
  height: 100%;
  background: #fff;
  .content{
    height: calc(100% - 46px);
    overflow: auto;
    li{
      height: 185px;
      width: calc(100% - 20px);
      margin: 10px auto 0;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 20px 30px;
      font-size: 14px;
      color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      p{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      button{
        border: 1px solid #fff;
        border-radius: 30px; 
        background: transparent;
        padding: 0 20px;
      }
    }
  }
}
</style>
